<template>
	<div id="singer">
		<!--ES6中的字符串拼接，把需要拼接的内容首先放在反单引号中，变量用${}符号包住-->
		<mt-index-list :show-indicator="true">
			<mt-index-section class="singer-list clear_fix" v-for="word in words" :index="word">
				<div class="singers fl" v-for="(item,index) in singerData" v-if="item.Findex==word" :title="item.Findex" @click="goToList(item.Fsinger_id)">
					<div class="singer-img">
						<img :src="`https://y.gtimg.cn/music/photo_new/T001R150x150M000${item.Fsinger_mid}.jpg?max_age=2592000`" />
					</div>
					<p class="singer-name textOverflow">{{item.Fsinger_name}}</p>
				</div>
			</mt-index-section>
		</mt-index-list>
	</div>
</template>

<script>
	import api from "../js/musicAPI.js";

	export default {
		data: function() {
			return {
				words:[],
				singerImg: "",
				singerData: "",
			}
		},
		created: function() {
			var that = this;
			api.getSingerList().then((res) => {
				that.singerData = res.data.list;//100位歌手的个人数据
				that.createWord();
			})
		},
		methods: {
			//生成26个大写字母
			createWord:function(){
				for(var i = 65; i < 91; i++) {
					this.words.push(String.fromCharCode(i));
				}
			},
			//地址传参
			goToList: function(id) {
				this.$router.push({
					path: "/singer_songs",
					query: {
						mid: id,
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../scss/singer";
</style>